<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 添加一些基本样式，仅作演示用途 */
    table {
      width: 50%;
      border-collapse: collapse;
      margin: 20px;
    }

    th,
    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    colgroup {
      background-color: #e0e0e0;
    }
  </style>
</head>

<body>
  <!-- 
1. `<table>`: 表格的容器。
2. `<caption>`: 表格标题。
3. `<tr>`: 表格中的一行。
4. `<th>`: 表头单元格。
5. `<td>`: 数据单元格。
6. `<thead>`: 表头部分的容器。
7. `<tbody>`: 表体部分的容器。
8. `<tfoot>`: 表尾部分的容器。
9. `<colgroup>`: 表示表格列的分组，常与`<col>`结合使用。
10. `<col>`: 定义表格列的属性。
11. `<thead>`: 表头行的容器，包含一个或多个`<tr>`。
12. `<tbody>`: 表体行的容器，包含一个或多个`<tr>`。
13. `<tfoot>`: 表尾行的容器，包含一个或多个`<tr>`。
   -->
  <!-- 主要表格 -->
  <table>
    <!-- 表格标题 -->
    <caption>月度销售统计</caption>

    <!-- 列定义 -->
    <colgroup>
      <col style="width: 20%;">
      <col style="width: 30%;">
      <col style="width: 20%;">
      <col style="width: 30%;">
    </colgroup>

    <!-- 表头 -->
    <thead>
      <tr>
        <th>日期</th>
        <th>产品</th>
        <th>销售量</th>
        <th>销售额</th>
      </tr>
    </thead>

    <!-- 表体 -->
    <tbody>
      <tr>
        <td>2023-01-01</td>
        <td>Product A</td>
        <td>50</td>
        <td>$5000</td>
      </tr>
      <tr>
        <td>2023-01-02</td>
        <td>Product B</td>
        <td>30</td>
        <td>$3000</td>
      </tr>
      <!-- 其他行 -->
    </tbody>

    <!-- 表尾 -->
    <tfoot>
      <tr>
        <td colspan="2">总计</td>
        <td>80</td>
        <td>$8000</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>